<template>
  <a-layout>
    <a-layout-content style="padding: 0 50px">
    <a-layout style="padding: 24px 0; background: #fff">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            :selectedKeys="selectKey"
            style="height: 100%"
            mode="inline"
            @click="handleClickMenu"
        >
          <a-menu-item key="welcome">
            <router-link to="/">
              <MailOutlined />
              欢迎
            </router-link>
          </a-menu-item>

          <a-sub-menu v-for="category in level1" :key="category.id">
            <template #title>
                <span>
                  <user-outlined />
                  {{ category.name }}
                </span>
            </template>
            <a-menu-item v-for="child in category.children" :key="child.id">
                <span>
                  <notification-outlined />
                  {{ child.name }}
                </span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{ padding: '24px', minHeight: '280px' }">
        <div id="welcome" v-show="isWelcome">
          <the-welcome></the-welcome>
        </div>
        <a-list v-show="!isWelcome" item-layout="vertical" size="large" :grid="{ gutter: 16, column: 3 }" :pagination="pagination" :data-source="ebooks">
          <template #renderItem="{ item }">
            <a-list-item key="item.title">
              <template #actions>
                <span>
                  <component is="CopyOutlined" style="margin-right: 8px" />
                  {{ item.docCount }}
                </span>
                <span>
                  <component is="LikeOutlined" style="margin-right: 8px" />
                  {{ item.voteCount }}
                </span>
                <span>
                  <component is="ReadOutlined" style="margin-right: 8px" />
                  {{ item.viewCount }}
                </span>
              </template>
              <a-list-item-meta :description="item.description">
                <template #title>
                  <router-link :to="'/doc?ebookId=' + item.id">
                    {{ item.name }}
                  </router-link>
                </template>
                <template #avatar><a-avatar :src="item.cover" /></template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>

      </a-layout-content>
    </a-layout>
  </a-layout-content>
  </a-layout>
</template>

<script>
import axios from 'axios';
import TheWelcome from '@/components/the-welcome.vue'
import {
  LikeOutlined,
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
  CopyOutlined,
  ReadOutlined
} from '@ant-design/icons-vue';
import {ref} from 'vue';
import {message} from "ant-design-vue";
import {Tool} from "@/util/tool.ts";


export default ({
  components: {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
    LikeOutlined,
    CopyOutlined,
    ReadOutlined,
    TheWelcome
  },
  setup(){
    const ebooks = ref();
    const listData = [];
    const isWelcome = ref(true);
    const selectKey = ref(['welcome']);
    const actions = [
      {
        type: 'StarOutlined',
        text: '156',
      },
      {
        type: 'LikeOutlined',
        text: '156',
      },
      {
        type: 'MessageOutlined',
        text: '2',
      },
    ];

    const pagination = ref({
      page: 1,
      size: 10,
    });

    const queryEbooks = (params) => {
      axios.get("/ebook/list", {params}).then((response) =>{
        ebooks.value = response.data.data.list;
      });
    }

    const level1 = ref();
    const categorys = ref();
    // 查询所有分类数据
    const handleQuery = (params) => {
      axios.get("/category/list", {params}).then((response) => {
        const data = response.data;
        if (data.code == 200){
          categorys.value = data.data;
          level1.value = Tool.array2Tree(categorys.value, 0);
        } else {
          message.error(data.message)
        }
      });
    };
    const handleClickMenu = (item) => {
      if (item.key == 'welcome'){
        isWelcome.value = true;
      } else {
        isWelcome.value = false;
        selectKey.value = [item.key];
        queryEbooks({
          page: pagination.value.page,
          size: pagination.value.size,
          category2Id: item.key
        });
      }
    }

    const handleOpen = ( keys) => {
      let key = keys[0];
      if (key == 'welcome'){
        isWelcome.value = true;
      } else {
        isWelcome.value = false;
        queryEbooks({
          page: pagination.value.page,
          size: pagination.value.size,
          category1Id: key
        });
      }
    }


    return {
      ebooks,
      listData,
      actions,
      handleQuery,
      level1,
      isWelcome,
      handleClickMenu,
      pagination,
      selectKey,
      handleOpen
    };
  },
  mounted(){
    this.handleQuery();
  }
})
</script>
<style scoped>
  .ant-avatar{
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 8%;
    margin: 5px 0;
  }
   #components-layout-demo-top-side .logo {
     float: left;
     width: 120px;
     height: 31px;
     margin: 16px 24px 16px 0;
     background: rgba(255, 255, 255, 0.3);
   }

  .ant-row-rtl #components-layout-demo-top-side .logo {
    float: right;
    margin: 16px 0 16px 24px;
  }

  .site-layout-background {
    background: #fff;
  }

</style>
